<template>
    <div class="carousel">
      <div class="carousel-inner" :style="{ transform: `translateX(${currentOffset}px)` }">
        <img :src="images[currentIndex % images.length]" alt="cat" />
        <img :src="images[(currentIndex + 1) % images.length]" alt="dog" />
      </div>
      <button @click="prev" class="carousel-control left">❮</button>
      <button @click="next" class="carousel-control right">❯</button>
    </div>
  </template>
  
  <script>
  import catImage from '../assets/images/cat.png';
  import dogImage from '../assets/images/dog.png';
  
  export default {
    data() {
      return {
        currentIndex: 0,
        intervalId: null,
        images: [
          catImage,
          dogImage
        ]
      };
    },
    computed: {
      currentOffset() {
        return -this.currentIndex * 100; // 假设每张图片宽度为100%
      }
    },
    methods: {
      next() {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      },
      prev() {
        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
      },
      startAutoPlay() {
        this.intervalId = setInterval(() => {
          this.next();
        }, 3000); // 每3秒切换一次
      },
      stopAutoPlay() {
        clearInterval(this.intervalId);
      }
    },
    mounted() {
      this.startAutoPlay();
    },
    beforeDestroy() {
      this.stopAutoPlay();
    }
  };
  </script>
  
  <style scoped>
  .carousel {
    position: relative;
    width: 500px; /* 根据需要调整 */
    overflow: hidden;
  }
  
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel img {
    min-width: 100%;
    height: auto;
  }
  
  .carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
  }
  
  .carousel-control.left {
    left: 10px;
  }
  
  .carousel-control.right {
    right: 10px;
  }
  </style>